<template>
	<view class="icon-input">
		
		<view v-if="icon" class="t-icon" :class="'t-' + icon"></view>
		<view v-else-if="label" class="t-icon" :style="labelStyle"  >{{label}}</view>
		<input :type="type" :placeholder="placeholder" :value="value" :disabled="disabled" @input="$emit('input', $event.detail.value)" />
		<slot name="code"></slot>
	</view>
</template>

<script>
	export default {
		name:'iconInput',
		props: {
			disabled:{
				type: [Boolean,String],
				default: false
			},
			labelStyle:{
				type: String,
				default: ''
			},
			label:{
				type: String,
				default: ''
			},
			value: {
				type: [String,Number],
				default: ''
			},
			type: {
				type: String,
				default: 'text'
			},
			placeholder: {
				type: String
			},
			icon: {
				type: String,
				required: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.icon-input {
		display: flex;
		align-items: center;
		margin: 0 auto;
		width: 630rpx;
		height: 120rpx;
		border-bottom: 1px solid #dfdfdf;

		view {
			margin: 0 20rpx;
			width: 42rpx;
			height: 40rpx;
		}

		input {
			flex: 1;
			height: 40rpx;
		}
	}
</style>